<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="template/base.xhtml">
    <ui:define name="content">
        <h:outputStylesheet library="css" name="orderInfo.css"/>
        <h:body>
            <h2 align="center">
                <h:outputFormat value="{0} - {1} minutes">
                    <f:param value="#{movieBean.movie.title}"/>
                    <f:param value="#{movieBean.movie.length}"/>
                </h:outputFormat>
                <br/>
                <h:outputText value="#{seatBean.startTime}">
                    <f:convertDateTime
                            pattern="yyyy/MM/dd HH:mm"/>
                </h:outputText>
            </h2>

            <h3>
                <h:outputFormat value="You have selected {0} ticket(s) for this show.">
                    <f:param value="#{seatBean.seatList.size()}"/>
                </h:outputFormat><br/>
            </h3>

            <h:form>
                <table>
                    <tr>
                        <td>Name:</td>
                        <td>
                            <h:inputText id="nameInput" label="Name" class="inputText"
                                         size="20" value="#{reservationController.name}">
                                <f:validateLength minimum="2"/>
                            </h:inputText>
                            <h:message for="nameInput" style="color:red"/>
                        </td>
                    </tr>
                    <tr>
                        <td>Email:</td>
                        <td>
                            <h:inputText id="emailInput" label="Email" class="inputText"
                                         size="20" value="#{reservationController.email}">
                                <f:validateLength minimum="2"/>
                            </h:inputText>
                            <h:message for="emailInput" style="color:red"/>
                        </td>
                    </tr>
                    <tr>
                        <td>Phone:</td>
                        <td>
                            <h:inputText id="phoneInput" label="Phone" class="inputText"
                                         size="20" value="#{reservationController.phone}">
                                <f:validateLength minimum="2"/>
                            </h:inputText>
                            <h:message for="phoneInput" style="color:red"/>
                        </td>
                    </tr>
                    <tr>
                        <td>Address:</td>
                        <td>
                            <h:inputText id="addressInput" label="Address" class="inputText"
                                         size="20" value="#{reservationController.address}">
                                <f:validateLength minimum="2"/>
                            </h:inputText>
                            <h:message for="addressInput" style="color:red"/>
                        </td>
                    </tr>
                </table>
                <h:commandLink action="#{reservationController.complete()}">
                    <h:graphicImage class="nextImage" library="images" name="next.png" />
                </h:commandLink>
            </h:form>
            <h:form>
                <h:commandLink action="chooseSeats?faces-redirect=true">
                    <h:graphicImage class="backImage" library="images" name="back.png" />
                </h:commandLink>
            </h:form>
        </h:body>
    </ui:define>
</ui:composition>
</html>